<template>
  <div>
    <van-nav-bar title="编辑资料" left-arrow @click-left="onClickLeft" />
    <div class="head_img">
      <van-uploader :after-read="afterRead" />
      <van-image width="100%" height="100%" round :src="user.head_img" />
    </div>
    <van-cell title="昵称" is-link :value="user.nickname" @click="nickNameShow = true" />
    <van-cell title="密码" is-link @click="passwordShow=true" value="********" />
    <van-cell title="性别" @click="gendershow=true" is-link :value="user.gender===0?'女':'男'" />
    <!-- <van-cell /> -->
    <!-- 修改昵称对话框 -->
    <van-dialog v-model="nickNameShow" title="修改昵称" show-cancel-button @confirm="editnickname()">
      <van-field v-model="nickname" placeholder="请输入新昵称" style="background:#eee" />
    </van-dialog>
    <!-- 修改密码对话框 -->
    <van-dialog v-model="passwordShow" title="修改密码" show-cancel-button @confirm="editpassword()">
      <van-field v-model="password" placeholder="请输入新密码" style="background:#eee" />
    </van-dialog>
    <!-- 修改性别 -->
    <van-action-sheet cancel-text="取消" v-model="gendershow" :actions="actions" @select="onSelect" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      gendershow: false,
      nickNameShow: false,
      passwordShow: false,
      actions: [
        { name: '男', gender: 1 },
        { name: '女', gender: 0 }
      ],
      nickname: '',
      password: '',
      user: {
        nickname: '火星网友',
        gender: 0,
        head_img: 'https://img.yzcdn.cn/vant/cat.jpeg'
      }
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    //上传头像
    async afterRead(fileObj){
      const file = new FormData();
      // 追加图片二进制文件
      file.append('file',fileObj.file)
      // 上传到服务器
      const {data:res} = await this.$http.post('/upload',file)
      if(res.message === '文件上传成功'){
        //返回接收服务器上图片的地址
        this.user.head_img =this.$http.defaults.baseURL+ res.data.url
        //发送修改请求
        const {data:res2} = await this.$http.post('/user_update/' + localStorage.getItem('userId'),{
          head_img:res.data.url
        })
        if(res2.message === '修改成功'){
          this.$toast.success('修改成功')
        }
      }
      
    },
    async onSelect(item) {
      const { data: res } = await this.$http.post(
        '/user_update/' + localStorage.getItem('userId'),
        { gender: item.gender }
      )
      if (res.message === '修改成功') {
        this.user.gender = res.data.gender
        this.gendershow = false
      }
    },
    async editnickname() {
      const { data: res } = await this.$http.post(
        '/user_update/' + localStorage.getItem('userId'),
        {
          nickname: this.nickname
        }
      )
      if (res.message === '修改成功') {
        this.user.nickname = res.data.nickname
        this.nickname = ''
      }
    },
    async editpassword() {
      const { data: res } = await this.$http.post(
        '/user_update/' + localStorage.getItem('userId'),
        {
          password: this.password
        }
      )
      if (res.message === '修改成功') {
        this.user.password = res.data.password
        console.log(res.data)
        this.password = ''
      }
    },
    async getUser() {
      const { data: res } = await this.$http.get(
        'user/' + localStorage.getItem('userId')
      )
      res.data.head_img = this.$http.defaults.baseURL + res.data.head_img
      this.user = res.data
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.head_img {
  width: 19.444vw;
  height: 19.444vw;
  margin: 8.333vw auto 5.556vw;
  position: relative;
}
.van-image{
  position: absolute;
  z-index: 1;
}
.van-uploader{
  position: absolute;
  opacity: 0;
  z-index: 2;

}
</style>